<template>
  <HeaderNav />
  <div class="dash-board">
    <!-- 资源面板 -->
    <div class="top-card">
      <DataCard v-for="(item, index) in cardData" :key="index" :data-value="item.value" :data-label="item.label"
        :bg-color="item.bgColor" :text-color="item.textColor" />
    </div>
    <!-- 图表 -->
    <div class="grapic-chart">
      <div class="line-chart">
        <LineChart />
      </div>
      <div class="pie-chart">
        <PieChart />
      </div>
    </div>
    <!-- 资源列表 -->
    <div class="resource-list">
      <ResList />
    </div>
  </div>
</template>

<script setup>
// 引入私有组件
import HeaderNav from '@/components/HeaderNav.vue'
import DataCard from '../dashboard/components/DataCard.vue';
// 引入公共组件
import ResList from './components/ResList.vue';
import LineChart from './components/LineChart.vue';
import PieChart from './components/PieChart.vue';

// 引入API
import { getDashboardStats } from '@/api/dashboard';
import { ref, onMounted } from 'vue';

// 数据
const cardData = ref([]);

// 获取统计数据
const fetchDashboardStats = async () => {
  try {
    const response = await getDashboardStats();
    if (response.code === 200) {
      const stats = response.data;
      cardData.value = [
        { value: stats.totalResources, label: '资源总量', bgColor: '#165DFF', textColor: '#fff' },
        { value: stats.usedResources, label: '已用资源', bgColor: '#165DFF', textColor: '#fff' },
        { value: stats.storageUsage, label: '存储占用', bgColor: '#165DFF', textColor: '#fff' },
        { value: stats.cpuUsage, label: 'CPU使用率', bgColor: '#165DFF', textColor: '#fff' },
        { value: stats.memoryUsage, label: '内存占用', bgColor: '#165DFF', textColor: '#fff' },
        { value: stats.networkBandwidth, label: '网络带宽', bgColor: '#165DFF', textColor: '#fff' }
      ];
    }
  } catch (error) {
    console.error('获取仪表板统计数据失败:', error);
  }
};

// 组件挂载时获取数据
onMounted(() => {
  fetchDashboardStats();
});
</script>

<style scoped lang="scss">
.dash-board {
  padding: 20px;
  background-color: rgb(234, 239, 242);

  .top-card {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .grapic-chart {
    display: flex;
    margin-top: 10px;
    height: 100%;

    .line-chart {
      flex: .7;
      background-color: rgb(250, 249, 245);
      border-radius: 5px;

      .left-line {
        margin-left: -50px;
      }
    }

    .pie-chart {
      flex: .3;
      margin-left: 20px;
      background-color: rgb(251, 250, 246);
      border-radius: 5px;
      display: flex;
      justify-content: center;

    }
  }

  .resource-list {
    margin-top: 10px;
  }
}
</style>
